{% extends 'landpage/base.html' %}
{% load staticfiles %}
{% block content %}

<!-- Header -->
<header>
    <div class="container">
        <div class="intro-text">
            <div class="intro-lead-in">
                Welcome to our classroom!
            </div>
            <div class="intro-heading">
                It's time to start learning
            </div>
            <a onclick="ajax_popup_register();" class="btn btn-xl">
                Register
            </a>
        </div>
    </div>
</header>



<!-- Social Media -->
<div id="social-buttons" class="hidden-print">
    <div class="container">
        <ul class="list-inline">
            <li>
                <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=AcademicsToday&amp;repo=py-academicstoday&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
            </li>
            <li>
                <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=AcademicsToday&amp;repo=py-academicstoday&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
            </li>
            <li>
                <iframe src="https://ghbtns.com/github-btn.html?user=AcademicsToday&repo=py-academicstoday&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
            </li>
            <li class="follow-btn">
                <!-- Make your own here: https://dev.twitter.com/web/follow-button -->
                <iframe
                    src="//platform.twitter.com/widgets/follow_button.html?screen_name=AcademicsToday"
                    style="width: 235px; height: 20px;"
                    allowtransparency="true"
                    frameborder="0"
                    scrolling="no">
                </iframe>
            </li>
            <li class="tweet-btn hidden-phone">
                <!-- Make your own here: https://about.twitter.com/resources/buttons#tweet -->
                <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.acadmicstoday.ca" data-text="Providing free university education to everyone on the planet, check us out!" data-via="AcademicsToday" data-hashtags="AcademicsToday">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
            </li>
        </ul>
    </div>
</div>



<!-- Services Section -->
<section id="services">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Why Enroll today?</h2>
                <h3 class="section-subheading text-muted">Because we believe education is for everyone</h3>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-users fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">Free for Everyone</h4>
                <p class="text-muted">We at Academics Today believe in the principle of Neutron Learning, also known as learning without charge. You can take any course you want, for free.</p>
            </div>
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-graduation-cap fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">Eductional</h4>
                <p class="text-muted">Academics Today can be used to link to videos all around the world, compile them, and add tests and assignments to create personalized courses.</p>
            </div>
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-code-fork fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">Open Source</h4>
                <p class="text-muted">Academics Today is a tool that can be used by anyone and seen by everyone. Open Source Code ensures all can participate securely.</p>
            </div>
        </div>
    </div>
</section>



<!-- Courses Section -->
{% if top_courses.count > 0 %}
<section id="portfolio" class="bg-light-gray">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Courses</h2>
                <h3 class="section-subheading text-muted">Pick from the amazing courses available</h3>
            </div>
        </div>
        <div class="row">
            {% for top_pick in top_courses %}
            <div class="col-md-4 col-sm-6 portfolio-item">
                <a href="#portfolioModal1" class="portfolio-link"
            data-toggle="modal"
                onclick="ajax_popup_course_preview({{ top_pick.course.id }});";>
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    {% if top_pick.course.image == '' %}
                    <img src="{% static 'img/dummy.png' %}"
                        class="img-responsive" alt="">
                    {% else %}
                    <img src="{{ top_pick.course.image.url }}"
                        class="img-responsive" alt="">
                    {% endif %}
                    
                        </a>
                <div class="portfolio-caption">
                    <h4>{{ top_pick.course.title }}</h4>
                    <p class="text-muted">{{ top_pick.course.category }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}


<!--              -->
<!-- Team Section -->
<!--              -->
<section id="team" class="bg-light-gray">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Our Amazing Team</h2>
                <h3 class="section-subheading text-muted">Meet the team who are passionate about eductating the current generation and beyond!</h3>
            </div>
        </div>
        <div class="row">
            {% for team_member in team_members %}
            <div class="col-sm-4">
                <div class="team-member">
                    <img src="{% static 'img/' %}{{ team_member.image_filename }}"
                       class="img-responsive img-circle" alt="">
                    <h4>{{ team_member.full_name }}</h4>
                    <p class="text-muted">{{ team_member.role }}</p>
                    <ul class="list-inline social-buttons">
                        <li>
                            {% if team_member.twitter_url != None %}
                            <a href="{{ team_member.twitter_url }}">
                                <i class="fa fa-twitter"></i>
                            </a>
                            {% endif %}
                        </li>
                        <li>
                            {% if team_member.facebook_url != None %}
                            <a href="{{ team_member.facebook_url }}">
                                <i class="fa fa-facebook"></i>
                            </a>
                            {% elif team_member.google_url != None %}
                            <a href="{{ team_member.google_url }}">
                                <i class="fa fa-google"></i>
                            </a>
                            {% endif %}
                        </li>
                        <li>
                            {% if team_member.linkedin_url != None %}
                            <a href="{{ team_member.linkedin_url }}">
                                <i class="fa fa-linkedin"></i>
                            </a>
                            {% elif team_member.github_url != None %}
                            <a href="{{ team_member.github_url }}">
                                <i class="fa fa-github"></i>
                            </a>
                            {% endif %}
                        </li>
                    </ul>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <p class="large text-muted">Follow us on your favourite social-networking site. We appreciate your support.</p>
            </div>
        </div>
    </div>
</section>



<!-- Clients Aside -->
<aside class="clients">
    <div class="container">
        <div class="row">
            {% for partner in partners %}
            <div class="col-md-3 col-sm-6">
                <a href="http://{{ partner.url }}">
                    <img src="{% static 'img/' %}logos/{{ partner.image_filename }}"
                       class="img-responsive img-centered"
                         alt=""{{ partner.title }}>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</aside>



<!-- Contact Us Section -->
<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Contact Us</h2>
                <h3 class="section-subheading text-muted">Any comments, issues, or suggestions will be read by one of the staff.</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <form name="sentMessage" id="contactForm" novalidate="">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ contact_form.name }}
                                <p id="id_contact_name_danger" class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                {{ contact_form.email }}
                                <p id="id_contact_email_danger" class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                {{ contact_form.phone }}
                                <p id="id_contact_phone_danger" class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ contact_form.message }}
                                <p id="id_contact_message_danger" class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                {{ contact_form.captcha }}
                                <p id="id_contact_captcha_danger" class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-lg-12 text-center">
                            <div id="success"></div>
                            <button onclick="ajax_send_message();"
                                         id="id_send_msg_btn"
                                       name="send_msg_btn"
                                       type="button"
                                      class="btn btn-xl">Send Message</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>



<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <span class="copyright">Copyright © Academics Today 2015</span>
            </div>
            <div class="col-md-4">
                <ul class="list-inline social-buttons">
                    <li><a href="https://twitter.com/AcademicsToday"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="https://www.facebook.com/AcademicsToday"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="https://plus.google.com/+AcademicsTodayInc"><i class="fa fa-google-plus"></i></a></li>
                    <li><a href="https://github.com/AcademicsToday"><i class="fa fa-github"></i></a></li>
                    <li><a href="http://www.youtube.com/academicstodayinc"><i class="fa fa-youtube"></i></a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4">
                <ul class="list-inline quicklinks">
                    <li><a href="/privacy">Privacy Policy</a>
                    </li>
                    <li><a href="/terms">Terms of Use</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>


<!----------------------------------------------------------------------------->

<!-- Modal -->
<div id="ajax_response_course_preview"
   name="ajax_response_course_preview"></div>
<div id="ajax_response_login"></div>
<div id="ajax_response_register"></div>
<!-- end modal -->

<!----------------------------------------------------------------------------->

{% include "landpage/main/js.html" %}

{% if HAS_ADVERTISMENT %}
<!-- Ads -->
<br/>
<div class="row">
    <div class="col-lg-12">
        <div style="text-align: center;">
            <a href='http://a-ads.com?partner=68202'>Advertise with Anonymous Ads</a>
        </div>
    </div>
</div>
<!-- /.Ads-->
{% endif %}

{% endblock content %}